<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菱形星星</title>
    <link rel="stylesheet" href="../css/css03.css">
</head>
<body>
    <div class="container">
        <!-- <script>
            var line=10;
            for(var i=1;i<line;i++){
                if (i<5) {
                    for(var j=0;j<line-i-5;j++){
                        document.write('&nbsp');
                    }
                    for(var j=0;j<2*i-1;j++){
                        document.write('*');
                    }
                }else{
                    for(var j=0;j<i-line+5;j++){
                        document.write('&nbsp');
                    }
                    for(var j=(line-i)*2-1;j>0;j--){
                        document.write('*');
                    }
                }
                document.write('<br>');
            }
        </script> -->
        <!-- <script>
            var x=1;
            var y=5;
            for(var line=1;line<=9;line++){
                for(var i=0;i<y;i++){
                    document.write("&nbsp")
                }
                if (line<5) {
                    y--;
                }
                else{
                    y++;
                }
                for(var j=0;j<2*x-1;j++){
                    document.write("*");
                }
                if (line<5) {
                    x++;
                }else{
                    x--;
                }
                document.write("<br>");
            }
        </script>
   -->
        <script type="text/javascript">
            let con=document.querySelector(".container")
            let str=""
            for (i = 1; i <= 5; i++) {
            for (k = 5; k > i; k--) {                
                str+="&nbsp"
            }
            for (j = 1; j <= 2*i-1; j++) {             
                str+='<span style="color:blue">*</span>'
            }
                str+='<br>'
        }
            for (i = 1; i <= 5; i++) {
            for (k = 0; k < i-1; k++) {
                str+="&nbsp"
            }
            for (j = 1; j <= 2*(5-i)+1; j++) {                
                str+='<span style="color:red">*</span>'
            }
            str+='<br>'
        }
        con.innerHTML=str
        </script>

    </div>
</body>
</html>